<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
			<style>
				/*练习：1  圆形   2.正三角形
				思路1：宽高与边框倒角一致
				
				*/
			   div#zero{
				   width:400px;
				   height: 400px;
				   border: 1px solid pink;
				   border-radius: 50%;
				   /*边框阴影 box-shadow  属性*/
				   box-shadow: 5px 5px 50px 50px red inset;
			   }
			   /*思路2：div#triangle
					        css中：抓到div      【斜线】
				                 左边框： 50像素实线红色
				                 右边框： 50像素实线黄色
								下边框： 50像素实线黑色
				注意：先别加宽高   transparent 透明色  */
				div#triangle{
					width: 0;
					/*border-left: 50px solid transparent;
					border-right: 50px solid transparent;
					border-bottom: 50px solid black;*/
					
					/* 两行  倒三角，蓝色，透明度 .3 
					提醒：所有的边框：50px solid transparent
					    上边框颜色改为蓝色  0，0，255
					*/
				   border: 50px solid transparent;
				   border-right-color: rgba(0,0,255,.3);
				}
				/* outline  边框轮廓  只针对input 元素 */
				input{
					outline: 1px solid red;
				}
				/* 实际应用：通配选择器 去掉轮廓
					{ outline: 0;}		
					 
				 */
				
			</style>
	</head>
	<body>
		<div id="zero"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>